<template>
  <Head />
  <div class="home">
    <img :class="['gif', gifShow && 'show']" src="@/assets/images/1.gif" />
    <img :class="['gif', !gifShow && 'show']" src="@/assets/images/2.gif" />
    <div class="main">
      <div class="title1" data-aos="fade-down" data-aos-duration="1000">
        Pizza Space
      </div>
      <div class="currency" data-aos="fade-down" data-aos-duration="1000">
        <div class="title">
          {{ $t("title") }}
        </div>
        <div class="currency-box f-r-sb">
          <img src="@/assets/images/logo/bitcoin-btc-logo.png" />
          <img src="@/assets/images/logo/ethereum-classic-etc-logo.png" />
          <img src="@/assets/images/logo/internet-computer-icp-logo.png" />
          <img src="@/assets/images/logo/optimism-ethereum-op-logo.png" />
          <img src="@/assets/images/logo/bnb-bnb-logo.png" />
        </div>
        <div class="btn" @click="goGame">S T A R T</div>
      </div>
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="gold" >
  <van-swipe-item v-for="item in newNFTList" :key="item">
    <img :src="item" />
  </van-swipe-item>
</van-swipe>
      </div>

 
    </div>
  </div>
  <div class="partner-box">
    <img src="@/assets/images/partner-bg.jpg" alt="" />
  </div>
  <div class="footer">© 2024 Pizza Space All Rights Reserved.</div>
</template>

<script setup lang="ts">
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import { getAssetsFile } from "@/utils/tool";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper/modules";
const router = useRouter();
let gifShow = ref(true);
const swiperRef = ref(null);
const onSwiper = (swiper: any) => {
  swiperRef.value = swiper;
};

const newNFTList = ref(
  ["https://btwgswap.github.io/nft/pizzaspaceclub/images/0.jpg",
  "https://btwgswap.github.io/nft/pizzaspaceclub/images/1.jpg",
  "https://btwgswap.github.io/nft/pizzaspaceclub/images/2.jpg",
  "https://btwgswap.github.io/nft/pizzaspaceclub/images/3.jpg",
  "https://btwgswap.github.io/nft/pizzaspaceclub/images/4.jpg"]
)

let goGame = () => {
  router.push({
    path: "/game"
  });
};

onMounted(() => {
  setTimeout(() => {
    gifShow.value = !gifShow.value;
  }, 2000); // 3秒后修改值
});
</script>
<style scoped lang="scss">

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #f0b90b;
  }

.title1 {
  z-index: 2;
  font-size: 40px;
  color: #f0b90b;
  text-align: center;
  letter-spacing: -0.025em;
  display: inline;
  font-weight: 600;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: fangsong;
  text-transform: uppercase;
	background: linear-gradient(to right, #30CFD0 0%, #f0b90b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.home {
  .main {
    position: relative;
    width: 100vw;
    padding-bottom: 40px;
    margin-top: -60px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .currency {
      width: 90vw;
      padding: 5vw;
      margin-top: 10px;
      border-radius: 2.4vw;
      box-shadow: 0 1.066667vw 1.066667vw #00000040;
      background: linear-gradient(to right, #395257, #104f67);
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        text-align: center;
        font-size: 24px;
        color: #fff;
        text-align: center;
        letter-spacing: -0.025em;
        display: inline;
        font-weight: 600;
        width: 100%;
        margin-bottom: 20px;


      }

      .currency-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        img {
          width: 12vw;
        }
      }

      .btn {
        width: 27.2vw;
        height: 7.2vw;
        margin: auto;
        margin-top: 5.333333vw;
        background-color: #f0b90b;
        border-radius: 5.6vw;
        box-shadow: 0 1.066667vw 1.066667vw #01121e;
        font-size: 3.2vw;
        color: #11202f;
        font-weight: bold;
        text-align: center;
        line-height: 7.2vw;
      }
    }

    .banner {
      margin-top: 30px;
      width: 90vw;
      background: 20px;
      border-radius: 10px;
      img {
        border-radius: 10px;
      }
    }

    .about {
      width: 90vw;
      color: #ccc;
      padding-top: 30px;
      h2 {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 30px;
        text-align: center;
      }
      h4 {
        color: #bbb;
        font-size: 15px;
        margin-bottom: 20px;
      }
    }

  }
}

.footer {
  z-index: 2;
  text-align: center;
  color: #8b8f95;
  font-size: 12px;
  margin: 20px auto 0;
  padding-bottom: 20px;
}

.gif {
  bottom: 0;
  width: 100%;
  z-index: 1;
  display: none;
  height: 520px;

  &.show {
    display: block;
  }
}

.shadow-medium {
  box-shadow: 0px 0px 15px 0px rgba(240, 185, 11, 0.03),
    0px 2px 30px 0px rgba(240, 185, 11, 0.08),
    0px 0px 1px 0px rgba(240, 185, 11, 0.3);
}
</style>
